<template>
  <a-modal
    :visible="visible"
    title="修改头像"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    @cancel="close">
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
        >
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>

    <template slot="footer">
      <s-upload
        style="display:inline-block;"
        v-model="fileList"
        :showUploadList="false"
        text="上传"
        fileType="image"
        :number="1"
        :multiple="false"
        :showIcon="false"/>
      <a-button key="back" style="margin-left:8px;" @click="cancelHandel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="cropperOkHandel">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
  import { VueCropper } from 'vue-cropper'

  export default {
    name: 'AvatarModal',
    components: {
      VueCropper
    },
    data() {
      return {
        visible: false,
        id: null,
        confirmLoading: false,
        fileList: [],
        options: {
          img: '/avatar2.jpg',
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: true
        },
        previews: {}
      }
    },
    methods: {
      edit(id, avatar) {
        console.log(id)
        console.log(avatar)
        this.visible = true
        this.id = id
        this.options.img = avatar
      },
      close() {
        this.id = null
        this.options.img = ''
        this.visible = false
        this.fileList = []
      },
      cancelHandel() {
        this.close()
      },
      cropperOkHandel() {
        const vm = this
        vm.confirmLoading = true
        // 获取截图的blob数据
        this.$refs.cropper.getCropBlob(async (data) => {
            let formData = new FormData()
            formData.append('file', data, 'DX.jpg')
            uploadAction(vm.url.upload, formData).then(res => {
              vm.confirmLoading = false
              vm.close()
              vm.$message.success('头像设置成功')
              vm.$emit('ok', getFileAccessHttpUrl(res.message))
            })
        })
      },
      setAvatarBase64(src, callback) {
        let _this = this
        let image = new Image()
        // 处理缓存
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = src + '?v=' + Math.random();
        // 支持跨域图片
        // image.onload = function () {
        //   console.log(11111)
        //   let base64 = _this.transBase64FromImage(image)
        //   callback && callback(base64)
        // }
        console.log(image)
      },
      // 将网络图片转换成base64格式
      transBase64FromImage(image) {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // 可选其他值 image/jpeg
        return canvas.toDataURL("image/png");
      },
      realTime(data) {
        this.previews = data
      }
    },
    watch: {
      fileList(value) {
        this.options.img = getFileAccessHttpUrl(value)
      }
    }
  }
</script>

<style lang="less" scoped>

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
